<template>

    <div>
        <div id="top">
            <p>
                活动时间
                <el-date-picker v-model="value1" type="datetime" placeholder="开始时间">
                </el-date-picker>
                <el-date-picker v-model="value2" type="datetime" placeholder="结束时间">
                </el-date-picker>
                <el-button type="primary" @click="search()">搜索</el-button>
            </p>
            <el-button type="primary" style="margin-right:40px;" @click="add()">添加</el-button>
        </div>

        <template>
            <el-table :data="tableData" border style="width: 100%;">
                <el-table-column type="index" label="序号" width="70">
                </el-table-column>
                <el-table-column prop="date" label="创建日期">
                    <template slot-scope="scope">
                        {{ new Date(scope.row.date).toLocaleString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="收支类型">
                </el-table-column>
                <el-table-column prop="describe" label="收支描述">
                </el-table-column>
                <el-table-column prop="expend" label="收入">
                </el-table-column>
                <el-table-column prop="cash" label="支出">
                </el-table-column>
                <el-table-column prop="remark" label="描述">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
            </el-pagination>
        </div>

        <!-- 添加 -->
        <el-dialog :title="flag ? '添加资金信息' : '修改资金信息'" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="收支类型">
                    <el-select v-model="ruleForm.type" placeholder="请选择收支类型">
                        <el-option label="转账" value="转账"></el-option>
                        <el-option label="提现" value="提现"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收支描述" prop="describe">
                    <el-input v-model="ruleForm.describe"></el-input>
                </el-form-item>
                <el-form-item label="收入" prop="income">
                    <el-input v-model="ruleForm.income"></el-input>
                </el-form-item>

                <el-form-item label="支出" prop="expend">
                    <el-input v-model="ruleForm.expend"></el-input>
                </el-form-item>
                <el-form-item label="账户现金" prop="cash">
                    <el-input v-model="ruleForm.cash"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">{{ flag? '添加': '编辑' }}</el-button>

                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>

import { getProfiles, getAdd, getDelete, getEdit } from '../untils/api';
export default {
    data() {
        return {
            value1: '',
            value2: '',
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            dialogFormVisible: false,
            flag: undefined,//控制添加和修改弹框
            dialogVisible1: false,
            editId: '',
            ruleForm: {
                type: '',
                describe: '',
                income: '',
                expend: '',
                cash: '',
                remark: ''
            },
            rules: {
                describe: [
                    { required: true, message: '请输入收支描述', trigger: 'blur' },
                ],
                income: [
                    { required: true, message: '请输入收入金额', trigger: 'blur' },
                ],
                expend: [
                    { required: true, message: '请输入支出金额', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入账户金额', trigger: 'blur' },
                ],
                resource: [
                    { required: true, message: '请输入备注', trigger: 'blur' },
                ],

            }
        }
    },
    methods: {
        page() {
            getProfiles().then(res => {
                // console.log(res);
                this.tableData = res.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
                this.tableData.length = res.data.length
            })

        },
        handleEdit(index, row) {//编辑
            console.log(index, row);
            this.dialogFormVisible = true
            this.flag = false
            this.ruleForm = row
            this.editId = row._id
        },
        handleDelete(index, row) {
            // console.log(row);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getDelete({ id: row._id }).then(res => {
                    console.log(res);
                    if (res.request.status == 200) {
                        this.page()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            // console.log(index, row);

        },

        //分页
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            // console.log(`每页 ${val} 条`);
            this.page()

        },
        handleCurrentChange(val) {
            this.currentPage = val;
            // console.log(`当前页: ${val}`);
            this.page()
        },
        //添加
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.editId) {
                        getEdit(this.ruleForm).then(res => {
                            console.log(res);
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        })
                    } else {
                        getAdd(this.ruleForm).then(res => {
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                        })
                        this.page()
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            this.dialogFormVisible = false
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //添加按钮点击
        add() {
            this.dialogFormVisible = true
            this.flag = true
            this.ruleForm = {}
        },
        search() {//搜索
            // console.log(this.value1);
            if (!this.value1 && !this.value2) {
                this.page()
            } else {
                let time1 = new Date(this.value1).getTime()
                let time2 = new Date(this.value2).getTime()
                if (time1 <= time2) {
                    this.tableData = this.tableData.filter(item => {
                        return time1 <= new Date(item.date).getTime() && new Date(item.date).getTime()<= time2
                    })
                } else {
                    this.tableData = ''
                    this.$message({
                        type: 'warning',
                        message: '没有数据'
                    });
                }

            }
        }

    },
    created() {
        this.page()
        //    new Date().toLocaleString()

    },
    // mounted(){
    //     this.page()
    // }
}
</script>
<style lang="scss" scoped>
#top {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.el-input--prefix {
    margin: 10px;
}
</style>


